<template>
	<view class="container">
		<view class="wrapper">
			
			<view style=" padding: 30rpx;">
				<view style=" position: relative;z-index: 2; background-color: rgba(255, 255, 255, 75%);padding: 40rpx 40rpx 40rpx 40rpx;border-radius: 20rpx;">
					<view style="padding: 20rpx 0rpx 50rpx 0rpx;font-size: 40rpx;text-align: center; ">
						
						<view style="line-height: 60rpx;">重置密码操作</view>
					</view>
					<view class="venueForm">
						<view>
							<view class="form-row">
								<view class="ftitle">登录账号</view>
								<input class="fvalue" placeholder="输入登录账号"  v-model="form.account"  />
							</view>
						</view>
						<view class="height30"></view>
						<view>
							<view class="form-row">
								<view class="ftitle">手机号码</view>
								<input class="fvalue" placeholder="输入手机号码"  v-model="form.phone"  />
							</view>
						</view>
						<view class="height30"></view>
						<view>
							<view class="form-row">
								<view class="ftitle">验证码</view>
								<input class="fvalue" placeholder="输入短信验证码"  v-model="form.code"  />
								<view style="width: 100px;text-align: center;font-size: 32rpx;color: #f77d15;" @click="getCode">{{ smsData.getCodeText }}</view>
							</view>
						</view>
						<view class="height30"></view>
						<view >
							<view class="form-row">
								<view class="ftitle">新的密码</view>
								<input class="fvalue"  v-model="form.password" type="password" placeholder="输入登录密码"  />
							</view>
						</view>
						<view class="height30"></view>
						<view >
							<view class="form-row">
								<view class="ftitle">确认密码</view>
								<input class="fvalue"  v-model="form.passwordConfirm" type="password" placeholder="输入登录密码"  />
							</view>
						</view>
						<view class="height30"></view>
						<view>
							<button class="submitBtn" @click="formSubmitBtn">提 交</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/utils/md5.js';
	export default {
		data() {
			return {
				//重置申请表单
				form: {
					//登录账号
					account: '',
					//手机号码
					phone: '',
					//验证码
					code: '',
					//新密码
					password: '',
					//新密码确认
					passwordConfirm: ''
				},
				smsData: {
					getCodeText: '获取',
					getCodeBtnDisabled: false
				}
			}
		},
		methods: {
			//短信验证码发送
			getCode() {
				if(this.smsData.getCodeBtnDisabled){
					return ;
				}
				if(!this.form.phone){
					uni.$u.toast("请输入手机号码后获取")
					return ;
				}
				uni.showLoading({
					title: '发送中...',
					mask: true
				})
				this.$request({
					url: '/blade-merchant-app/merchant-app/sms/send',
					type: 'POST',
					data: { phone: this.form.phone }
				}).then(res => {
					setTimeout(() => {
						if (res?.code === 200) {
							uni.$u.toast("短信发送成功");
							this.smsData.getCodeBtnDisabled = true;
							this.setTimer(); //调用定时器方法
						} else{
							uni.$u.toast(res.msg);
						}
					}, 2000)
				})
			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.smsData.getCodeText = "60s"
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.smsData.getCodeBtnDisabled = false
						this.smsData.getCodeText = "获取"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.smsData.getCodeText = holdTime+"s"
					holdTime--;
				}, 1000)
			},
			// 按钮恢复原样
			getcodeDefault(){
				// 清除定时器
				clearInterval(this.Timer); 
				this.smsData.getCodeText = '获取'
				this.smsData.getCodeBtnDisabled = false
			},
			
			// 上传文件
			onUpload(files, type) {
				const {
					file
				} = files;
				let index = this[`${type}List`].length;
				this[`${type}List`].push({
					...file,
					status: 'uploading',
					message: '上传中'
				})
				this.$utils.onUploadFile(file.url)
					.then(res => {
						let item = this[`${type}List`][index];
						this[`${type}List`].splice(index, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: res.data.link
						}))
					})
			},
			// 删除图片
			onDelete(e, type) {
				this[`${type}List`].splice(e.index, 1);
			},
			//提交注册申请
			formSubmitBtn(){
				if(!this.form.account){
					uni.$u.toast("请输入您的登录账号")
					return ;
				}
				if(!this.form.phone){
					uni.$u.toast("请输入您预留的手机号码")
					return ;
				}
				if(!this.form.code){
					uni.$u.toast("请输入验证码")
					return ;
				}
				if(!this.form.password){
					uni.$u.toast("请输入新的登录密码")
					return ;
				}
				if(!this.form.passwordConfirm){
					uni.$u.toast("请再一次输入新的登录密码")
					return ;
				}
				if(this.form.password != this.form.passwordConfirm){
					uni.$u.toast("两次密码输入不一致，请确认新的登录密码")
					return ;
				}
				
				let that=this
				uni.showModal({
					title: '提示',
					content: '确认是否立即重置密码?',
					success: function(res) {
						if (res.confirm) {
							that.resetPassWord();
						}
					}
				});
				
			},
			//提交申请
			resetPassWord(){
				var params = {};
				params.account = this.form.account;//商家端用户帐号
				params.phone = this.form.phone;
				params.code = this.form.code;
				params.newPassword = md5.hex_md5_32(this.form.password);
				var whereUrl = '?account='+this.form.account+'&phone='+this.form.phone+'&code='+this.form.code+'&newPassword='+md5.hex_md5_32(this.form.password);
				
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.$request({
					url: '/blade-merchant-app/merchant-app/user/reset-password'+whereUrl,
					type: 'POST',
					data: params
				}).then(res => {
					uni.hideLoading();
					if (res?.code === 200) {
						
						uni.showModal({
						   title: '密码重置成功',
						   content: '请使用新设置的密码进行登录操作',
						   showCancel: false,
						   success: function (res) {
							   if (res.confirm) {
								   uni.navigateBack()
							   }
						   }
						});
						
					} else {
						uni.$u.toast(res.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	
	page {
		height: 100%;
		overflow: hidden;
		letter-spacing: 1rpx;
		background: linear-gradient(#155CCF,#e5e5e5, #e5e5e5);
	
		.container {
			height: 100%;
			display: flex;
			-webkit-box-pack: center;
			justify-content: center;
			align-items: center;
	
			.wrapper {
				width: 100%;
				
				.venueForm {
					
					.form-row {
						border-radius: 8rpx;display: flex;border: 1px solid #c3c3c3;justify-content: center;align-items: center; 
						
						.ftitle {
							text-align: center;
							font-size: 30rpx;
							width: 180rpx;
							display: inline-table;
							color: #333333;
							padding:0rpx 10rpx;
						}
						.fvalue {
							height: 90rpx;width: 100%;font-size: 32rpx;
						}
					
					}
					
					.height30 {
						height: 30rpx;
					}
					
					.submitBtn {
						height: 90rpx;background-color: #0544ab;color: #ffffff;line-height: 90rpx;font-size: 32rpx;
					}
					
				}
				
			}
		}
	}		
		
		
		
 

</style>
